<template>
    <div class="editor">
        <el-row :gutter="10">
            <el-col :span="12">
                <el-button @click="submitForm" size="small" type="primary" icon="el-icon-edit"
                    style="position: absolute;left:40.5% ;top: 5px;z-index: 1;" v-if="isSaveAuth">保存</el-button>
                <el-button @click="runCode" size="small" type="success" icon="el-icon-view"
                    style="position: absolute;left:44.5% ;top: 5px;z-index: 1;">预览</el-button>
                <el-tabs class="left-content" type="border-card">
                    <el-tab-pane label="Template">
                        <MonacoEditor ref="html" width="100%" height="83vh" language="html"></MonacoEditor>
                    </el-tab-pane>
                    <el-tab-pane label="CSS">
                        <MonacoEditor ref="css" width="100%" height="83vh" language="css"></MonacoEditor>
                    </el-tab-pane>
                    <el-tab-pane label="Script">
                        <MonacoEditor ref="script" language="javascript" width="100%" height="83vh"></MonacoEditor>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="12">
                <el-tabs type="border-card">
                    <el-tab-pane label="预览">
                        <div class="right-content" ref="viewPanel"></div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>

import { getBVueComponent, updateBVueComponent, saveComponentImage } from "@/api/ghxx/bVueComponent";
import { uuid } from "@jiaminghi/data-view/lib/util";
import Vue from 'vue'
import { toPng } from 'html-to-image'
export default {
    name: "app",
    components: {
    },
    data() {
        return {
            form: {},
            isSaveAuth: false,
            program: null,
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.getDetail();
        }
    },
    beforeDestroy() {
        this.reset();
    },
    methods: {
        runCode() {
            this.reset();
            var html = this.$refs.html.monacoEditor.getValue();
            var css = this.$refs.css.monacoEditor.getValue();
            var script = this.$refs.script.monacoEditor.getValue();

            //拼接到现有的docment元素中
            if (!html || !script) {
                this.$message.error('请输入有效的Vue代码');
                return;
            }
            let js = script.replace(/export default/, 'return ')
            const common = new Function(js)()
            common.template = html
            const Template = Vue.extend(common)
            this.program = new Template()
            this.$refs.viewPanel.appendChild(this.program.$mount().$el)
            if (css) {
                const styles = document.createElement('style')
                styles.type = 'text/css'
                styles.id = uuid()
                styles.innerHTML = css
                this.$refs.viewPanel.appendChild(styles)
            }
        },
        reset() {
            this.$refs.viewPanel.innerHTML = ''
            if (this.program) {
                this.program.$destroy()
            }
            this.program = null
        },
        getDetail() {
            getBVueComponent(this.$route.query.id).then(response => {
                this.form = response.data;
                if (this.form.deptIdStrs.indexOf(this.$store.getters.deptId) > -1) {
                    this.isSaveAuth = true;
                } else {
                    this.isSaveAuth = false;
                }
                this.$refs.html.monacoEditor.setValue(this.form.componentTemplate)
                this.$refs.css.monacoEditor.setValue(this.form.componentStyle)
                this.$refs.script.monacoEditor.setValue(this.form.componentScript)
                this.runCode();
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.form.id = this.$route.query.id;
            this.form.componentTemplate = this.$refs.html.monacoEditor.getValue();
            this.form.componentStyle = this.$refs.css.monacoEditor.getValue();
            this.form.componentScript = this.$refs.script.monacoEditor.getValue();
            updateBVueComponent(this.form).then(response => {
                this.$modal.msgSuccess("保存成功");
                this.htmlToImage();
            });
        },
        htmlToImage() {
            toPng(this.$refs.viewPanel)
            .then(dataUrl => {
                //保存缩率图
                this.form.base64 = dataUrl;
                saveComponentImage(this.form);
            })
            .catch(error => {
                console.error('oops, something went wrong!', error)
            })
        },
    },
};
</script>
  
<style scoped>
.editor {
    padding: 10px;
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 90vh;
    position: relative;
}

.left-content {
    width: 100%;
    height: 100%;
}

.right-content {
    padding: 10px;
    width: 100%;
    height: 90vh;
}

.right-content p {
    margin: 5px 0;
}
</style>
  